<template>
  <div class="app-container">
    <el-card>
      <LiveOverview :tabs="realTimeData" @refresh="getOverviewStatistics">
        <div slot="search">
          <SearchForm
            :form-option="formOption"
            :show-btn="true"
            :btn-list="btnList"
            v-model="formOption.data"
            label-width="90px"
          />
        </div>
      </LiveOverview>

      <div class="mt-30">
        <LineChart
          :title="title"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :legend="legend"
          :series-data="seriesData"
          :color="color"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { useFilterStatistics } from '@/hooks'
export default {
  name: 'IntegralOverview',
  data() {
    return {
      // 实时数据列表
      realTimeData: [
        {
          isShow: true,
          baseData: {
            key: 'totalOutlayAmount',
            value: '',
            label: '累计总支出积分(分)'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '总产生积分'
          },
          yesterdayData: {
            isShow: true,
            key: 'monthOutlayAmount',
            value: '',
            isUnit: {
              startText: '本月'
            }
          },
          path: '/integral/data_overview/integral_overview_detail'
        },
        {
          isShow: true,
          baseData: {
            key: 'totalIncomeAmount',
            value: '',
            label: '累计总收入积分(分)'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '订单兑换总积分'
          },
          yesterdayData: {
            isShow: true,
            key: 'monthIncomeAmount',
            value: '',
            isUnit: {
              startText: '本月'
            }
          },
          path: '/integral/data_overview/integral_overview_detail'
        },
        {
          isShow: true,
          baseData: {
            key: 'totalExchangeAmount',
            value: '',
            label: '第三方平台兑换总积分(分)'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '订单兑换总积分'
          },
          yesterdayData: {
            isShow: true,
            key: 'monthExchangeAmount',
            value: '',
            isUnit: {
              startText: '本月'
            }
          },
          path: '/integral/data_overview/integral_overview_detail'
        },
        {
          isShow: true,
          baseData: {
            key: 'totalGiftAmount',
            value: '',
            label: '企业主赠送总积分'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '企业主赠送总积分'
          },
          yesterdayData: {
            isShow: true,
            key: 'monthGiftAmount',
            value: '',
            isUnit: {
              startText: '本月'
            }
          },
          path: '/integral/data_overview/integral_overview_detail'
        }
      ],

      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'daterange',
            label: '',
            value: 'time',
            valueFormat: 'yyyy-MM-dd'
          }
        ],
        data: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.getOverviewStatistics()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = {}
            this.getOverviewStatistics()
          }
        }
      ],
      // 会员走势折线图相关
      title: {
        text: '月度积分走势',
        left: '1%'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        icon: 'circle',
        data: ['总支出积分', '总消耗积分']
      },
      color: ['#7aa3ef', '#11840d'],
      seriesData: []
    }
  },
  created() {
    this.getOverviewStatistics()
  },
  methods: {
    async getOverviewStatistics() {
      const { time } = this.formOption.data
      const params = {
        startDate: time && time[0],
        endDate: time && time[1]
      }
      const {
        data: {
          lineData,
          monthExchangeAmount,
          monthGiftAmount,
          monthIncomeAmount,
          monthOutlayAmount,
          totalExchangeAmount,
          totalGiftAmount,
          totalIncomeAmount,
          totalOutlayAmount
        }
      } = await this.$http.integral.overviewDataApi.getOverviewStatistics(params)

      // 统计图
      this.seriesData = [
        {
          name: '总支出积分',
          type: 'line',
          data: lineData.map(item => item.outlayAmount)
        },
        {
          name: '总消耗积分',
          type: 'line',
          data: lineData.map(item => item.incomeAmount)
        }
      ]
      this.xAxis.data = lineData.map(item => item.date)

      // 统计概况
      const overviewData = {
        baseData: {
          totalExchangeAmount,
          totalGiftAmount,
          totalIncomeAmount,
          totalOutlayAmount
        },
        yesterdayData: {
          monthExchangeAmount,
          monthGiftAmount,
          monthIncomeAmount,
          monthOutlayAmount
        }
      }

      this.realTimeData = useFilterStatistics(this.realTimeData, overviewData)
      console.log(this.realTimeData)
    }
  }
}
</script>
